<script setup lang="ts">
/**
 * @/views/home/components/CalendarCard.vue
 * 日历卡片组件
 */

/* 导入 */
import type { CalendarDateType, CalendarInstance } from "element-plus";
import { ref } from "vue";

/* 数据 */
const calendar = ref<CalendarInstance>();

/* 回调 */
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return;
  calendar.value.selectDate(val);
};
</script>

<template>
  <div class="calendar-card">
    <el-card style="width: 20vw">
      <template #header>
        <p>小镇日历</p>
      </template>
      <el-calendar ref="calendar">
        <template #header="{ date }">
          <p>小镇日历</p>
          <el-button-group>
            <el-button size="small" @click="selectDate('prev-month')">
              上月
            </el-button>
            <el-button size="small" @click="selectDate('today')">
              今天
            </el-button>
            <el-button size="small" @click="selectDate('next-month')">
              下月
            </el-button>
          </el-button-group>
        </template>
      </el-calendar>
    </el-card>
  </div>
</template>

<style scoped></style>
